import React, { Component } from 'react'
const sty_blockStyle = {
  width: "100px",
  height: "100px",
  border: "1px solid #333",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  fontSize: "20px",
  cursor: "pointer"
};
const sty_checked = {
  border: "1px solid blue",
  background: "blue",
  color: "#fff"
}
export default class BaseBlock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
      nowState: this.props.status,
    }
  }
  componentDidMount() {
    this.judgeProps(this.props);
  }
  componentWillReceiveProps (props) {
    this.judgeProps(props);
  }
  render() {
    return (
      <div style={this.state.checked ? {...sty_blockStyle, ...sty_checked}: sty_blockStyle } onClick={() => {this.rejectData()}}>
        {this.state.nowState < 0 ? '' : this.state.nowState}
      </div>
    )
  }
  judgeProps = (props) => {
    this.setState({checked: props.index === props.target});
  }
  rejectData = () => {
    return this.props.getInfo(this.state.nowState)
  }
}
